<template>
  <a-card :bordered='false'>
    <div class='card-title'>{{ $route.meta.title }}</div>
    <div class='table-operator'>
      审核状态：
      <a-radio-group v-model='queryParam.status' button-style='solid' @change='handleRefresh(true)'>
        <a-radio-button :value='-1'>
          全部
        </a-radio-button>
        <a-radio-button :value='0'>
          待提交
        </a-radio-button>
        <a-radio-button :value='1'>
          待审核
        </a-radio-button>
        <a-radio-button :value='2'>
          审核通过
        </a-radio-button>
        <a-radio-button :value='3'>
          审核未通过
        </a-radio-button>
      </a-radio-group>
      销售：
      <SelectSale
        @change='handleRefresh(true)'
        v-model='queryParam.store_user_id'
        placeholder='请选择销售'
        :position='0'
      />
      会计：
      <SelectSale
        @change='handleRefresh(true)'
        v-model='queryParam.kj_user_id'
        placeholder='请选择会计'
        :position='1'
      />
      外勤：
      <SelectSale
        @change='handleRefresh(true)'
        v-model='queryParam.wq_user_id'
        placeholder='请选择外勤'
        :position='2'
      />
      客户：
      <SelectCustomer
        @change='handleRefresh(true)'
        width='260px'
        v-model='queryParam.customer_id'
        placeholder='请选择客户'
      />

      <!--          <a-input-search-->
      <!--            style="max-width: 300px; min-width: 150px;float: right;"-->
      <!--            v-model="queryParam.search"-->
      <!--            placeholder="请输入服务名称"-->
      <!--            @search="onSearch"-->
      <!--          />-->
      <br />
      <br />
      录入时间：
      <a-range-picker format='YYYY-MM-DD' v-model='queryParam.create_time' @change='handleRefresh(true)' />
    </div>
    <s-table
      ref='table'
      rowKey='package_id'
      :loading='isLoading'
      :columns='columns'
      :data='loadData'
      :pageSize='15'
      :scroll='{x:1220}'
    >
      <div slot='status' slot-scope='text, item'>
        <a-tag v-if='text==0'>待提交</a-tag>
        <a-tag v-if='text==1' color='orange'>待审核</a-tag>
        <a-tag v-if='text==2' color='green'>审核通过</a-tag>
        <a-tag v-if='text==3' color='red'>审核未通过</a-tag>
      </div>
      <div slot='package_service' slot-scope='text, item'>
        <div v-for='item2 in text'>{{ item2.service_name }}</div>
      </div>
      <div class='actions' slot='ht' slot-scope='text, item'>
        签名时间：{{ item.signature_time_text || '-' }}<br />
        <a v-action:ckht @click='handleGoContractUrl(item)'>查看合同</a>
        <a v-action:khqm @click='handleSignCode(item)'>客户签名</a>
      </div>
      <div slot='store_user' slot-scope='text, item'>
        <div>销售姓名：{{ item.store_user ? item.store_user.real_name : '-' }} <a
          v-action:xgxs
          @click='editUser(item,0)'>编辑</a>
        </div>
        <div>会计姓名：{{ item.kj_user ? item.kj_user.real_name : '-' }} <a
          v-action:xgkj
          @click='editUser(item,1)'>编辑</a></div>
        <div>外勤姓名：{{ item.wq_user ? item.wq_user.real_name : '-' }} <a
          v-action:xgwq
          @click='editUser(item,2)'>编辑</a></div>
      </div>
      <div slot='customer' slot-scope='text, item'>
        <div>客户姓名：{{ text.full_name || '-' }}</div>
        <div>身份证号：{{ text.idnumber || '-' }}</div>
        <div>公司名称：{{ text.corporate_name || '-' }}</div>
        <div>授权签约人：{{ text.signatory || '-' }}</div>
        <div>手机号码：{{ text.mobile || '-' }}</div>
      </div>

      <div slot='service_desc' slot-scope='text, item'>
        <span v-if='!item.service_desc'>-</span>
        <a-tooltip v-else placement='top'>
          <template slot='title'>
            <span v-html='item.service_desc'></span>
          </template>
          <a>{{ item.service_desc.length <= 10 ? item.service_desc : item.service_desc.substr(0, 10) + '...' }}</a>
        </a-tooltip>
      </div>

      <div class='actions' slot='action' slot-scope='text, item'>
        <template v-if='item.status==1'>
          <a-popconfirm
            title='确认审核通过?'
            ok-text='确认'
            cancel-text='再想想'
            @confirm='auditConfirm(item,2)'
          >
            <a v-action:audit>审核通过</a>
          </a-popconfirm>

          <a-popconfirm
            title='确认审核不通过?'
            ok-text='确认'
            cancel-text='再想想'
            @confirm='auditConfirm(item,3)'
          >
            <a style='color: red' v-action:audit>审核不通过</a>
          </a-popconfirm>
        </template>
        <a v-action:show @click='handleDetails(item)'>查看详情</a>
      </div>
    </s-table>
    <AddForm ref='AddForm' @handleSubmit='handleRefresh' />
    <DetailsModel ref='DetailsModel' @handleSubmit='handleRefresh' />
    <SignCodeModel ref='SignCodeModel' />
    <a-modal
      title='编辑分配信息'
      :visible='editUserVisible'
      :destroyOnClose='true'
      @cancel='editUserVisible=false'
      @ok='subEditUser'
    >
      选择：
      <SelectSale
        v-model='currUserId'
        :position='position'
      />
    </a-modal>
  </a-card>
</template>

<script>
import * as Api from '@/api/customer/package'
import { SelectCustomer, SelectSale, STable } from '@/components'
import AddForm from './modules/AddForm.vue'
import SignCodeModel from '../PackageModel/SignCodeModel.vue'
import DetailsModel from './modules/Details.vue'

export default {
  name: 'Index',
  components: {
    STable,
    AddForm,
    SignCodeModel,
    DetailsModel,
    SelectSale,
    SelectCustomer
    // EditForm
  },
  data() {
    return {
      // 查询参数
      queryParam: {
        status: -1
      },
      // 正在加载
      isLoading: false,
      // 表头
      columns: [
        {
          title: 'ID',
          width: 60,
          dataIndex: 'package_id'
        },
        {
          title: '状态',
          width: 100,
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          width: 340,
          title: '客户信息',
          dataIndex: 'customer',
          scopedSlots: { customRender: 'customer' }
        },
        {
          title: '分配信息',
          width: 180,
          dataIndex: 'store_user',
          scopedSlots: { customRender: 'store_user' }
        },
        {
          width: 240,
          title: '服务信息',
          dataIndex: 'package_service',
          scopedSlots: { customRender: 'package_service' }
        },
        {
          title: '服务说明',
          width: 200,
          dataIndex: 'service_desc',
          scopedSlots: { customRender: 'service_desc' }
        },
        {
          title: '合同信息',
          dataIndex: 'ht',
          width: 180,
          scopedSlots: { customRender: 'ht' }
        },
        {
          title: '录入时间',
          width: 180,
          dataIndex: 'create_time',
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '100px',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: param => {
        return Api.list({ ...param, ...this.queryParam })
          .then(response => {
            return response.data.list
          })
      },
      types: [
        { text: '收款金额*', symbols: '%' },
        { text: '固定金额', symbols: '元' },
        { text: '每月提成', symbols: '元' }
      ],
      types2: [
        { text: '(成交价格-成本价格)*', symbols: '%' },
        { text: '固定金额', symbols: '元' },
        { text: '每月提成', symbols: '元' }
      ],
      types3: [
        { text: '收款金额*', symbols: '%' },
        { text: '固定金额', symbols: '元' },
        { text: '选择成本费用', symbols: '元' }
      ],

      editUserVisible: false,
      position: -1,
      currEditUserItem: {},
      currUserId: ''
    }
  },
  created() {
  },
  methods: {
    // 查看详情
    handleDetails(item) {
      this.$refs.DetailsModel.open(item)
    },

    handleSignCode({ package_id }) {
      this.$refs.SignCodeModel.open('http://ht.szhxvip.com/index/package/signatureContract/package_id/' + package_id)
    },

    handleGoContractUrl({ contract_url }) {
      window.open('https://view.officeapps.live.com/op/view.aspx?src=' + publicConfig.HTTP + contract_url)
    },
    editUser(item, position) {
      this.currEditUserItem = item
      this.position = position
      this.editUserVisible = true
      this.$nextTick(() => {
        if (position == 0) {
          this.currUserId = item.store_user_id
        } else if (position == 1) {
          this.currUserId = item.kj_user_id
        } else {
          this.currUserId = item.wq_user_id
        }
      })
    },

    subEditUser() {
      var form = {}
      if (this.position == 0) {
        form.store_user_id = this.currUserId
      } else if (this.position == 1) {
        form.kj_user_id = this.currUserId
      } else {
        form.wq_user_id = this.currUserId
      }

      Api.edit({ apiId: this.currEditUserItem['package_id'], form })
        .then(result => {
          this.$message.success(result.message, 1.5)
          this.handleRefresh()
          this.editUserVisible = false
        })
    },

    auditConfirm(item, status) {
      const app = this
      Api.subAudit({ apiId: item['package_id'], form: { status } })
        .then(result => {
          app.$message.success(result.message, 1.5)
          app.handleRefresh()
        })
    },

    // 删除记录
    handleDelete(item) {
      const app = this
      const modal = this.$confirm({
        title: '您确定要删除该记录吗?',
        content: '删除后不可恢复',
        onOk() {
          return Api.deleted({ apiId: item['service_id'] })
            .then(result => {
              app.$message.success(result.message, 1.5)
              app.handleRefresh()
            })
            .finally(result => modal.destroy())
        }
      })
    },

    /**
     * 刷新列表
     * @param Boolean bool 强制刷新到第一页
     */
    handleRefresh(bool = false) {
      this.$refs.table.refresh(bool)
    },

    // 检索查询
    onSearch() {
      this.handleRefresh(true)
    }

  }
}
</script>
